<script setup lang="ts">
</script>

<template>
    <div class="left">
        <h3>Vue3 学习demo <router-link to="/">返回首页</router-link></h3>
        <router-link to="/setup1">1.setup1:无响应式的数据、方法调用</router-link>
        <router-link to="/ref">2.ref: 定义一个响应式数据</router-link>
        <router-link to="/reactive">3.1 reactive: 定义对象类型的数据</router-link>
        <router-link to="/reactive2">3.2 reactive2: 定义对象类型的数据（代理对象、源对象）</router-link>
        <router-link to="/responsive">4.响应式：动态修改属性(会自动刷新界面)</router-link>
        <router-link to="/setup_detail">5.setup_detail: 介绍setup的两个重要参数，涉及 props、emit 和 slots</router-link>
        <router-link to="/computed">6.computed: 写法较vue2相比有很大的改动 </router-link>
        <router-link to="/watch_ref">7.1 watch_ref: 监控 ref 定义的响应式数据 </router-link>
        <router-link to="/watch_reactive">7.2 watch_reactive: 监控 reactive 定义的响应式数据 </router-link>
        <router-link to="/watch_ref_value">7.3 watch_ref_value: 监控 ref 时开启 deep 的时机 </router-link>
        <router-link to="/watchEffect">8. watchEffect: 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。</router-link>
        <router-link to="/vue3Life">9. vue3Life: vue3 的生命周期</router-link>
        <router-link to="/customHook">10. customHook: 自定义 hook 函数</router-link>
        <router-link to="/toRef_toRefs">11. toRef_toRefs: 基于响应式对象上的一个属性，创建一个对应的 ref</router-link>
        <router-link to="/router_routeA">12.1 router_routeA: 路由传参（发起）</router-link>
        <router-link to="/router_routeB">12.2 router_routeB: 路由传参（接收）</router-link>
    </div>

    <div class="right">
        <span>代码演示区</span>
        <hr>
        <router-view></router-view>
    </div>
</template>

<style>
#app {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    box-sizing: border-box;
}


.left {
    width: 50%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}
a{
    border-bottom: 1px solid #000;
}
.right {
    width: 50%;
    height: 100%;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
}
</style>
